<template>
    <div>
        <div class="index-container">
            <div class="index-item">
                <div class="icon-container">
                    <SvgIcon name="日历" width="48px" height="48px" color="#40c9c6"></SvgIcon>
                </div>
                <div>
                    <span class="card-panel-text">本周</span>
                </div>
            </div>
            <div class="index-item">
                <div class="icon-container">
                    <SvgIcon name="日历" width="48px" height="48px" color="#36a3f7"></SvgIcon>
                </div>
                <div>
                    <span class="card-panel-text">本月</span>
                </div>
            </div>
            <div class="index-item">
                <div class="icon-container">
                    <SvgIcon name="日历" width="48px" height="48px" color="#f4516c"></SvgIcon>
                </div>
                <div>
                    <span class="card-panel-text">近七日</span>
                </div>
            </div>
            <div class="index-item">
                <div class="icon-container">
                    <SvgIcon name="日历" width="48px" height="48px" color="#ccd57b"></SvgIcon>
                </div>
                <div>
                    <span class="card-panel-text">近30日</span>
                </div>
            </div>
        </div>
        <div class="chart-container">
            <EchartsComponent></EchartsComponent>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useHomeStore } from '@/stores/index'
import router from '@/router';
import SvgIcon from '@/components/svgIcon/SvgIcon.vue';
import EchartsComponent from '@/components/EchartsComponent/EchartsComponent.vue';
let store = useHomeStore()

onMounted(() => {
    // 页面加载完成后，检查是否登录，未登录则跳转到登录界面
    if (!store.isLogin) {
        router.push('/login')
    }
})
</script>

<style scoped>
.index-container {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    margin-top: 25px;
}

.icon-container {
    width: 48px;
    height: 48px;
    padding: 16px
}

.index-item {
    width: 267px;
    height: 108px;
    background: #fff;
    border-radius: 10px;
}

.chart-container {
    background: #fff;
    margin-top: 30px;
}

.index-item {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.card-panel-text {
    line-height: 48px;
    color: rgba(0, 0, 0, .45);
    font-size: 28px;
    font-weight: bold;
}
</style>
